<!-- components/guide/GuideTour.vue -->
<template>
  <div class="guide-tour" v-if="isVisible">
    <div class="guide-overlay" @click="skipGuide"></div>
    <div 
      class="guide-highlight" 
      :style="highlightStyle"
      :class="{ 'no-animation': !isAnimating }"
    ></div>
    <div 
      class="guide-tooltip" 
      :style="tooltipStyle"
      :class="{ 'no-animation': !isAnimating }"
    >
      <div class="guide-content">
        <h3 class="guide-title">{{ currentStep?.title }}</h3>
        <p class="guide-description">{{ currentStep?.content }}</p>
        <div class="guide-actions">
          <el-button 
            v-if="currentStepIndex > 0" 
            @click="prevStep"
            size="small"
          >
            上一步
          </el-button>
          <el-button 
            v-if="currentStepIndex < steps.length - 1" 
            @click="nextStep"
            type="primary"
            size="small"
          >
            下一步
          </el-button>
          <el-button 
            v-else 
            @click="finishGuide"
            type="primary"
            size="small"
          >
            完成
          </el-button>
          <el-button 
            @click="skipGuide"
            size="small"
            link
          >
            跳过
          </el-button>
        </div>
      </div>
      <div class="guide-progress">
        {{ currentStepIndex + 1 }} / {{ steps.length }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { ref, computed, watch, onMounted, onUnmounted } from 'vue'

interface GuideStep {
  element: string // CSS选择器
  title: string
  content: string
  position?: 'top' | 'bottom' | 'left' | 'right'
}

const props = withDefaults(defineProps<{
  steps: GuideStep[]
  modelValue?: boolean
}>(), {
  steps: () => [],
  modelValue: false
})

const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
  (e: 'finish'): void
  (e: 'skip'): void
}>()

// 响应式数据
const isVisible = ref(false)
const currentStepIndex = ref(0)
const isAnimating = ref(false)

// 计算属性
const currentStep = computed(() => props.steps[currentStepIndex.value])

const targetElement = computed(() => {
  if (!currentStep.value) return null
  return document.querySelector(currentStep.value.element)
})

const highlightStyle = computed(() => {
  if (!targetElement.value) return {}
  
  const rect = targetElement.value.getBoundingClientRect()
  return {
    width: `${rect.width}px`,
    height: `${rect.height}px`,
    top: `${rect.top}px`,
    left: `${rect.left}px`
  }
})

const tooltipStyle = computed(() => {
  if (!targetElement.value) return {}
  
  const rect = targetElement.value.getBoundingClientRect()
  const position = currentStep.value?.position || 'bottom'
  
  switch (position) {
    case 'top':
      return {
        top: `${rect.top - 10}px`,
        left: `${rect.left + rect.width / 2}px`,
        transform: 'translate(-50%, -100%)'
      }
    case 'bottom':
      return {
        top: `${rect.bottom + 10}px`,
        left: `${rect.left + rect.width / 2}px`,
        transform: 'translate(-50%, 0)'
      }
    case 'left':
      return {
        top: `${rect.top + rect.height / 2}px`,
        left: `${rect.left - 10}px`,
        transform: 'translate(-100%, -50%)'
      }
    case 'right':
      return {
        top: `${rect.top + rect.height / 2}px`,
        left: `${rect.right + 10}px`,
        transform: 'translate(0, -50%)'
      }
    default:
      return {
        top: `${rect.bottom + 10}px`,
        left: `${rect.left + rect.width / 2}px`,
        transform: 'translate(-50%, 0)'
      }
  }
})

// 方法
const startGuide = () => {
  isVisible.value = true
  currentStepIndex.value = 0
  isAnimating.value = true
  emit('update:modelValue', true)
}

const nextStep = () => {
  if (currentStepIndex.value < props.steps.length - 1) {
    isAnimating.value = false
    setTimeout(() => {
      currentStepIndex.value++
      isAnimating.value = true
    }, 50)
  }
}

const prevStep = () => {
  if (currentStepIndex.value > 0) {
    isAnimating.value = false
    setTimeout(() => {
      currentStepIndex.value--
      isAnimating.value = true
    }, 50)
  }
}

const finishGuide = () => {
  isVisible.value = false
  emit('update:modelValue', false)
  emit('finish')
}

const skipGuide = () => {
  isVisible.value = false
  emit('update:modelValue', false)
  emit('skip')
}

const handleScroll = () => {
  // 滚动时重新计算位置
  isAnimating.value = false
  setTimeout(() => {
    isAnimating.value = true
  }, 50)
}

// 监听器
watch(() => props.modelValue, (newValue) => {
  isVisible.value = newValue
})

// 生命周期
onMounted(() => {
  window.addEventListener('scroll', handleScroll)
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})

// 暴露方法给父组件
defineExpose({
  startGuide
})
</script>

<style scoped>
.guide-tour {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  pointer-events: none;
}

.guide-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  pointer-events: auto;
}

.guide-highlight {
  position: fixed;
  border: 2px solid var(--primary-color, #409eff);
  border-radius: 4px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
  pointer-events: auto;
}

.guide-highlight.no-animation {
  transition: none;
}

.guide-tooltip {
  position: fixed;
  background: var(--header-bg, #ffffff);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 16px;
  min-width: 280px;
  max-width: 320px;
  pointer-events: auto;
  transition: all 0.3s ease;
  z-index: 10000;
}

.guide-tooltip.no-animation {
  transition: none;
}

.guide-tooltip::before {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--header-bg, #ffffff);
  transform: rotate(45deg);
}

.guide-tooltip[data-position="top"]::before {
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}

.guide-tooltip[data-position="bottom"]::before {
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}

.guide-tooltip[data-position="left"]::before {
  right: -6px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.guide-tooltip[data-position="right"]::before {
  left: -6px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.guide-title {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #303133);
}

.guide-description {
  margin: 0 0 16px 0;
  font-size: 14px;
  color: var(--text-regular, #606266);
  line-height: 1.5;
}

.guide-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.guide-progress {
  position: absolute;
  top: -32px;
  right: 0;
  font-size: 12px;
  color: var(--text-secondary, #909399);
}
</style>